<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul {
				width: 300px;
				height: 500px;
				border: 2px solid red;
			}
			ul li{
				line-height: 30px;
				background: yellow;
				list-style: none;
				margin-top: 5px;
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<!-- 
		1、 $(selector).unbind()  解除所有绑定事件
		2、 $(selector).unbind(事件1) 解除绑定事件1 
		3、 $(selector).unbind(事件1, fn1) 解除绑定事件1的fn1
		4、 $(selector).off() 解除所有绑定事件
		5、 $(selector).off(事件, [子元素], [fn])			
		-->
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
			<li>5555</li>
		</ul>

		<input id="btn1" type="button" value="移除ul绑定事件">

		<script>
			$(function() {
				
				$("ul").on("click", fn1 = function() {
					alert("这是fn1");
				});

				$("ul").on("click.gg", fn2 = function() {
					alert("这是fn2");
				});

				// 给事件命名空间
				$("ul").on("click.gg", fn3 = function() {
					alert("这是fn3");
				});

				$("ul").on("click", fn4 = function() {
					alert("这是fn4");
				});

				// $("#btn1").on("click",function(){
				// 	$("ul").off("click");			
				// });

				// $("#btn1").on("click",function(){
				// 	$("ul").off("click",fn3);
				// 	$("ul").off("click",fn4);			
				// });

				$("#btn1").on("click",function(){
					$("ul").off("click.gg");					
				});
				
							
			});
		</script>
	</body>
</html>
